<template>
	<view class="alert-edit-wrap">
		<view class="container-wrap">
			<view class="form-wrap">
				<u--form :model="maintenanceForm" ref="form" errorType="toast" labelPosition="left" labelWidth="80">
					<view class="form-item-wrap">
						<u-form-item label="站点名称">
							<u-input v-model="maintenanceForm.grouName" @focus="maintenanceClick" fontSize="14"
								placeholder="请输入站点名称"></u-input>
						</u-form-item>
					</view>
					<view class="form-item-wrap">
						<u-form-item label="运维时间">
							<u-input v-model="maintenanceForm.testTime" @focus="timesClick" fontSize="14"
								placeholder="请输入运维时间"></u-input>
						</u-form-item>
					</view>
					<view class="form-item-wrap">
						<u-form-item label="COD">
							<u-input v-model="maintenanceForm.cod" fontSize="14"
								placeholder="请输入COD"></u-input>
						</u-form-item>
					</view>
					<view class="form-item-wrap">
						<u-form-item label="氨氮">
							<u-input v-model="maintenanceForm.ammoniaNitrogen" fontSize="14"
								placeholder="请输入氨氮"></u-input>
						</u-form-item>
					</view>
					<view class="form-item-wrap">
						<u-form-item label="总氮">
							<u-input v-model="maintenanceForm.totalNitrogen" fontSize="14"
								placeholder="请输入总氮"></u-input>
						</u-form-item>
					</view>
					<view class="form-item-wrap">
						<u-form-item label="总磷">
							<u-input v-model="maintenanceForm.totalPhosphorus" fontSize="14"
								placeholder="请输入总磷"></u-input>
						</u-form-item>
					</view>
				</u--form>
			</view>
			<view class="btn-wrap">
				<u-button type="primary" size="normal" text="保存" @click="handleSaveForm"></u-button>
			</view>
			<u-datetime-picker @cancel="timeShow=false" @confirm="confirmTimes" :show="timeShow"
				mode="datetime"></u-datetime-picker>
			<u-picker @cancel="actionShow=false" @confirm="confirmFun" :show="actionShow" :columns="actionList"
				keyName="groupName"></u-picker>
		</view>
	</view>
</template>

<script>
	import {
		getGroupList
	} from '@/apis/modules/group';

	import {
		getWaterQuality,
		addWaterQuality,
		updateWaterQuality
	} from '@/apis/modules/maintenance.js';
	export default {
		data() {
			return {
				// 详情数据
				maintenanceForm: {
					grouId: '',
					grouName: '',
					totalPhosphorus: '',
					totalNitrogen: '',
					cod: '',
					ammoniaNitrogen: '',
					testTime:''
				},
				actionList: [],
				actionShow: false,
				timeShow: false,
				maintenanceArray: [{
					fanContent: '',
					maintenanceContent: ''
				}],
				isId: '',
				getDictsShow: false,
				getDictsIndex: 0,
				getDictsList: []
			}
		},
		onLoad(data) {
			if (data.id) {
				this.isId = data.id
				this.getAlertDetail(data.id);
			}
		},
		created() {
			this.getGroupListFun();
		},
		methods: {
			getGroupListFun() {
				getGroupList({
					pageNum: 1,
					pageSize: 100,
				}).then((res) => {
					this.actionList = [res.rows]
				})
			},
			maintenanceClick() {
				this.actionShow = true
			},
			confirmFun(e) {
				this.maintenanceForm.grouId = e.value[0].groupId
				this.maintenanceForm.grouName = e.value[0].groupName
				this.actionShow = false
			},
			timesClick() {
				this.timeShow = true
			},
			timestampToDateTime(timestamp) {
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');
				const seconds = String(date.getSeconds()).padStart(2, '0');
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			confirmTimes(e) {
				this.timeShow = false
				this.maintenanceForm.testTime = this.timestampToDateTime(e.value)
			},
			// 获取运维详情
			getAlertDetail(id) {
				getWaterQuality(id).then((res) => {
					console.log(res.data)
					this.maintenanceForm = res.data
				})
			},
			// 保存运维
			handleSaveForm() {
				console.log(this.maintenanceForm, 'sfaafsfas')
				if (this.isId) {
					updateWaterQuality(this.maintenanceForm).then((res) => {
						uni.showToast({
							icon: 'success',
							title: '修改成功'
						});
						uni.switchTab({
							url: `/pages/maintenance/maintenance?type=2`
						})
					})
				} else {
					addWaterQuality(this.maintenanceForm).then((res) => {
						uni.showToast({
							icon: 'success',
							title: '保存成功'
						});
						uni.switchTab({
							url: `/pages/maintenance/maintenance?type=2`
						})
					})
				}

			}
		},
	};
</script>

<style>
	page {
		height: 100%;
		background: #eef3f7;
	}
</style>
<style lang="scss" scoped>
	.alert-edit-wrap {
		.container-wrap {
			.form-wrap {
				background: #fff;
				margin: 30rpx;

				.form-item-wrap {
					padding: 4rpx 10rpx;
				}
			}

			.btn-wrap {
				margin: 30rpx 26rpx;
			}
		}
	}

	.maintenanceItem {
		width: 100%;
		display: flex;
		justify-content: space-between;

		.maintenanceItemLeft {
			flex: 1;
			padding: 10rpx;
		}

		.maintenanceItemRight {
			width: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			color: red;
		}
	}
</style>